const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { compilation } = require('webpack');
const { compileFunction } = require('vm');


//自定义plugin 实现去除bundle.js中 的无用注释
class MyPlugin {
    apply(compiler){
        console.log('MyPlugin 启动');
        compiler.hooks.emit.tap('MyPlugin', compilation =>{
            //compilation => 可以理解为此次打包的上下文
            for(const name in compilation.assets){
                if(name.endsWith('.js')){
                    const contents = compilation.assets[name].source()
                    const withoutComments = contents.replace(/\/\*\*+\*\//g,'')
                    compilation.assets[name] = {
                        source:()=>withoutComments,
                        size:()=> withoutComments.length
                    }
                }
                
            }
        })
        
    }
}
module.exports = {
    entry: './src/main.js',
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist'),
        // publicPath:'dist/,'
    },
    //去掉没有使用的代码
    optimization:{
        usedExports:true,//标记无用代码
        concatenateModules:true,//尽可能的将所有模块合并输出到一个模块中
        minimize:true,//删掉无用代码

    },
    devServer:{
        //指定静态资源 文件
        contentBase:'./public',
        //热更新
        hotOnly:true,
        proxy:{//配置代理 解决跨域
            '/api':{
                // http://localhost:8080/api/users -> https://api.github.com/api/users
                target:'https://api.github.com',
                // 把api去掉，请求真实路径 http://localhost:8080/api/users -> https://api.github.com/users
                pathRewrite:{
                    '^/api':''
                },
                // 不能使用 localhost:8080 作为请求github 主机名 
                changeOrigin:true,//设置true以 请求地址作为主机名
            }
        }
    },
    devtool:'source-map',//配置 source-map
    module:{
        rules:[
            {
                test:/.js$/,
                use: {
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env']
                    }
                },
                exclude: /node_modules/ //解决html-webpack-plugin的冲突 
            },
            {
                test:/.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/.png$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit: 10*1024 //10 KB只将文件小于10k的 文件用url-loader打包
                    }
                }
            },
           /*  {
                test:/.html$/,
                use:{
                    loader: 'html-loader',
                    options:{
                        attrs: ['img:src','a:href']
                    }
                }
            } */
        ]
    },
    plugins:[
        new webpack.DefinePlugin({
            API_BASE_URL:'"https://api.example.com"'
        }),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'webpack Plugin Gaoshidi',
            meta: {
                viewport:'widt=device-width'
            },
            template: './src/index.html'
        }),
        new HtmlWebpackPlugin({
            filename:'about.html'
        }),
        //开发阶段最好不使用这个插件
       /*  new CopyWebpackPlugin({
            patterns: [
                { from: 'public', to: 'public' },
            ]
        }), */
        new MyPlugin()
    ]
}